﻿<h1>
    RGraph: Javascript charts library</h1>
    <p><a href="http://www.rgraph.net/" target="_blank">http://www.rgraph.net/</a></p>
<link rel="stylesheet" href="/Content/RGraph/css/website.css" type="text/css" media="screen" />
<release_script_remove>
        <!-- These get replaced by a single combined JS file -->
        <script src="/Content/RGraph/libraries/RGraph.common.effects.js" ></script>
        <script src="/Content/RGraph/libraries/RGraph.common.core.js" ></script>
        <script src="/Content/RGraph/libraries/RGraph.common.tooltips.js" ></script>
        <script src="/Content/RGraph/libraries/RGraph.line.js" ></script>
        <script src="/Content/RGraph/libraries/RGraph.bar.js" ></script>
        <script src="/Content/RGraph/libraries/RGraph.pie.js" ></script>
    </release_script_remove>
<!--[if IE 8]>
        <script src="/Content/RGraph/excanvas/excanvas.original.js"></script>
    <![endif]-->
<style>
    .color_square
    {
        display: inline;
        display: inline-block;
        width: 10px;
        height: 10px;
    }
    
    .black
    {
        background-color: black;
    }
    
    .red
    {
        background-color: red;
    }
</style>
<script>
    window.onload = function (e) {
        if (RGraph.isIE8()) {
            CreateLineChart();
        }
    }        
</script>
<p>
    RGraph is a Javascript charts library. Using the new HTML5 canvas tag, RGraph charts
    are created in the web browser, meaning quicker pages and less web server load.
    Using RGraph is an easy way of speeding up your website and moving the job of charts
    creation from the server to the client.
</p>
<h2>
    Live demos</h2>
<p>
    <canvas id="cvs" width="480" height="250" style="float: left">[IE8+ is required to view the charts.]</canvas></p>
<p>
    <canvas id="cvs2" width="450" height="250" style="float: right">[IE8+ is required to view the charts.]</canvas></p>
<br clear="all" />
<h2>
    Examples</h2>
<div id="examples">
    <ul>
        <li><a href="/Content/RGraph/examples/bar.html">RGraph: Javascript charts library -
            bar charts</a></li><li><a href="/Content/RGraph/examples/basic.html">RGraph: Javascript
                charts library - a basic example</a></li><li><a href="/Content/RGraph/examples/bipolar.html">
                    RGraph: Javascript charts library - bi-polar charts</a></li><li><a href="/Content/RGraph/examples/donut.html">
                        RGraph: Javascript charts library - donut charts</a></li><li><a href="/Content/RGraph/examples/fuel.html">
                            RGraph: Javascript charts library - fuel charts</a></li><li><a href="/Content/RGraph/examples/funnel.html">
                                RGraph: Javascript charts library - funnel charts</a></li><li><a href="/Content/RGraph/examples/gantt.html">
                                    RGraph: Javascript charts library - gantt charts</a></li><li><a href="/Content/RGraph/examples/hbar.html">
                                        RGraph: Javascript charts library - horizontal bar charts</a></li><li><a href="/Content/RGraph/examples/hprogress.html">
                                            RGraph: Javascript charts library - horizontal progress bar</a></li><li><a href="/Content/RGraph/examples/index.html">
                                                RGraph: Javascript charts library - example charts</a></li><li><a href="/Content/RGraph/examples/led.html">
                                                    RGraph: Javascript charts library - LED grid</a></li><li><a href="/Content/RGraph/examples/line.html">
                                                        RGraph: Javascript charts library - line charts</a></li><li><a href="/Content/RGraph/examples/meter.html">
                                                            RGraph: Javascript charts library - meter charts</a></li><li><a href="/Content/RGraph/examples/odo.html">
                                                                RGraph: Javascript charts library - odometer charts</a></li><li><a href="/Content/RGraph/examples/pie.html">
                                                                    RGraph: Javascript charts library - pie charts</a></li><li><a href="/Content/RGraph/examples/radar.html">
                                                                        RGraph: Javascript charts library - Radar charts</a></li><li><a href="/Content/RGraph/examples/rose.html">
                                                                            RGraph: Javascript charts library - rose charts</a></li><li><a href="/Content/RGraph/examples/rscatter.html">
                                                                                RGraph: Javascript charts library - Radial scatter charts</a></li><li><a href="/Content/RGraph/examples/scatter.html">
                                                                                    RGraph: Javascript charts library - scatter charts</a></li><li><a href="/Content/RGraph/examples/text.html">
                                                                                        RGraph: Javascript charts & HTML5 canvas charts library - Animated rotating text
                                                                                        with the RGraph software</a></li><li><a href="/Content/RGraph/examples/thermometer.html">
                                                                                            RGraph: Javascript charts library - Thermometer charts</a></li><li><a href="/Content/RGraph/examples/vprogress.html">
                                                                                                RGraph: Javascript charts library - vertical progress bar</a></li><li><a href="/Content/RGraph/examples/waterfall.html">
                                                                                                    RGraph: Javascript charts library - waterfall charts</a></li></ul>
</div>
<script type="text/javascript">
    /**
    * Create the line graph
    */
    function CreateLineChart() {
        var data1 = [4, 6, 12, 16, 8, 4, 2, 8, 18, 16, 14, 16];
        var data2 = [2, 4, 8, 4, 2, 6, 6, 12, 8, 10, 6, 8];
        var labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

        // Must create the bar chart first when there's an overlayed line
        var myBar = new RGraph.Bar('cvs', [3, 5, 10, 10, 5, 5, 4, 5, 13, 13, 10, 12]);

        var grad = myBar.context.createLinearGradient(0, 125, 0, 250);
        grad.addColorStop(0, '#ccc');
        grad.addColorStop(1, 'white');

        myBar.Set('chart.colors', [grad]);
        myBar.Set('chart.strokestyle', null);
        myBar.Set('chart.noaxes', true);
        myBar.Set('chart.ylabels', false);
        myBar.Set('chart.gutter.left', 40);
        myBar.Set('chart.ymax', 20);
        myBar.Set('chart.background.grid.width', 1);
        myBar.Set('chart.background.grid.color', '#ddd');
        myBar.Set('chart.background.grid.autofit', true);
        myBar.Set('chart.background.grid.autofit.numvlines', 12);
        myBar.Set('chart.background.grid.autofit.numhlines', 5);

        if (!RGraph.isIE8()) {
            myBar.Set('chart.tooltips', ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']);
            myBar.Set('chart.tooltips.event', 'onclick');
        }

        var myLine = new RGraph.Line('cvs', data1, data2);
        myLine.Set('chart.labels', labels);
        myLine.Set('chart.gutter.left', 40);
        myLine.Set('chart.gutter.top', 35);
        myLine.Set('chart.gutter.right', 5);
        myLine.Set('chart.gutter.bottom', 20);
        myLine.Set('chart.colors', ['#f00', 'black']);
        myLine.Set('chart.units.post', '%');
        myLine.Set('chart.tickmarks', null);
        myLine.Set('chart.linewidth', 5);
        myLine.Set('chart.hmargin', 10);
        myLine.Set('chart.title', 'Robert and Daniels stats (with average bar chart)');
        myLine.Set('chart.title.vpos', 0.5);
        myLine.Set('chart.text.color', '#333');
        myLine.Set('chart.text.font', 'Arial');
        myLine.Set('chart.key', ['Robert', 'Daniel']);
        myLine.Set('chart.key.rounded', true);
        myLine.Set('chart.key.background', 'white');
        myLine.Set('chart.key.position.x', myLine.Get('chart.gutter.left') + 10);
        myLine.Set('chart.shadow', true);
        myLine.Set('chart.shadow.blur', 15);
        myLine.Set('chart.shadow.color', ['#faa', '#aaa']);
        myLine.Set('chart.background.grid', false);

        if (RGraph.isIE8()) {
            // Change the shadow color
            myLine.Set('chart.shadow.color', '#666');
        } else {
            myLine.Set('chart.curvy', true);
            myLine.Set('chart.curvy.factor', 0.25);


            function DrawTooltipChart(obj) {

                var tt = RGraph.Registry.Get('chart.tooltip');

                if (document.getElementById('tooltip_cvs') && typeof (window.__rgraph_line_tooltip_index__) == 'number') {

                    // Extract the data from the tooltip HTML itself
                    var r_data = data1[__rgraph_line_tooltip_index__];
                    var d_data = data2[__rgraph_line_tooltip_index__];

                    var bar = new RGraph.Bar('tooltip_cvs', [r_data, d_data]);
                    bar.Set('chart.gutter.top', 5);
                    bar.Set('chart.gutter.bottom', 5);
                    bar.Set('chart.gutter.left', 5);
                    bar.Set('chart.gutter.right', 5);
                    bar.Set('chart.noyaxis', true);
                    bar.Set('chart.background.grid', false);
                    bar.Set('chart.colors', ['#f00', '#000']);
                    bar.Set('chart.colors.sequential', true);
                    bar.Set('chart.shadow', true);
                    bar.Set('chart.shadow.offsetx', 0);
                    bar.Set('chart.shadow.offsety', 0);
                    bar.Set('chart.shadow.blur', 15);
                    bar.Set('chart.strokestyle', 'rgba(0,0,0,0)');
                    bar.Draw();
                    RGraph.Effects.Bar.Grow(bar);
                }
            }
            RGraph.AddCustomEventListener(myLine, 'ontooltip', DrawTooltipChart);
        }

        myBar.Set('chart.line', myLine);
        myBar.Draw();

        /**
        * Use the Expand animation
        */
        if (RGraph.isIE8()) {
            myLine.Draw();
        } else {
            RGraph.Effects.jQuery.Expand(myLine);
        }
    }
</script>
<br clear="all" />
<script>
    /**
    * Draw the Pie chart
    */
    var pie = new RGraph.Pie('cvs2', [45, 26, 23, 15, 11]);
    pie.Set('chart.strokestyle', 'white');
    pie.Set('chart.linewidth', 3);
    pie.Set('chart.shadow', true);
    pie.Set('chart.shadow.offsetx', 0);
    pie.Set('chart.shadow.offsety', 0);
    pie.Set('chart.shadow.blur', 15);
    pie.Set('chart.exploded', [7, 7, 7, 25, 25]);
    pie.Set('chart.labels', ['John', 'Fred', 'Lucy', 'Lou', 'Jenny']);
    pie.Set('chart.tooltips', ['John', 'Fred', 'Lucy', 'Lou', 'Jenny']);
    pie.Set('chart.highlight.style', '2d');
    //pie.Draw();
    RGraph.Effects.Pie.Grow(pie);
</script>
<h2>
    Available charts</h2>
<p>
    RGraph supports over twenty different types of charts, including: Bar charts, Bipolar
    charts, Donut charts, Fuel gauges, Funnel charts, Gantt charts, Horizontal Bar charts,
    Horizontal Progress bars, LED grids, Line charts, Meters, Odometers, Pie charts,
    Radar charts, Radial Scatter charts, Rose charts, Scatter charts, Thermometers,
    Vertical Progress bars and Waterfall charts. In addition there are variants available
    on many charts.
</p>
<script type="text/javascript">
    if (!RGraph.isIE8()) {
        CreateLineChart();
    }
</script>